<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
    *{margin: 0;padding: 0;}
    body{background: #000;}
    #box{width: 600px;height: 400px;background: #fff;position: relative;margin: 100px auto;}
    img{width: 600px;height: 400px;}
    strong,p{width: 600px;height: 30px;background: rgba(80,80,80,0.6);line-height: 30px;font-size: 24px;text-align: center;color: #F9BC28;}
    strong{position: absolute;top: 0}
    p{position: absolute;bottom: 0}
    ul{width: 50px;position: absolute;top: 0;left: -60px;padding: 0;}
    li{list-style: none;width: 50px;height: 50px;margin-bottom: 10px;background: #666;}
  </style>
  <script type="text/javascript">
    window.onload = function (){
      var Box = document.getElementById('box');
      var Img = Box.getElementsByTagName('img')[0];
      var Sto = Box.getElementsByTagName('strong')[0];
      var P = Box.getElementsByTagName('p')[0];
      var Ul = Box.getElementsByTagName('ul')[0];
      var Li = Box.getElementsByTagName('li');
      var arr1 = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"];
      var arr2 = ["图片1","图片2","图片3","图片4","图片5"];
      var num = 0;
      for (var i = 0; i < arr1.length; i++) {
        Ul.innerHTML += "<li></li>" ;
      };//for (var i = 0; i < arr1.length; i++)
      function tal(){
        Img.src = arr1[num];
        Sto.innerHTML = 1 + num + "/" + arr1.length;
        P.innerHTML = arr2[num];
        for(var i = 0;i < Li.length;i++){
          Li[i].style.background = "";
        }
        Li[num].style.background = "#FCD13C";
      }//function tal()
      tal();
      for(let i = 0;i < Li.length;i++){
        // Li[i].index = i;
        Li[i].onclick = function(){
          num = i;
          tal();
        }//Li[i].onclick
      }//for(i = 0;i < Li.length;i++)
    }
  </script>
</head>
<body>
  <div id="box">
    <img src="">
    <strong>文字加载中......</strong>
    <p>文字加载中......</p>
    <ul>
      
    </ul>
  </div>
</body>
</html>